<template>
    <view class="content">
        <van-popup :show="show" position="bottom" round @click-overlay="closePopup"
            custom-style="width: 100%;overflow:scroll;background:#ffffff;">
            <view class="popup-content">
                <view class="popup-title">
                    <view class="popup-title-left">筛选</view>
                    <view class="popup-title-right" @click="closePopup"><van-icon name="arrow-up" size="12" /></view>
                </view>
                <view class="popup-main">
                    <view class="popup-sort">
                        <view class="popup-item" :class="{ active: curPopup === index }" v-for="(item, index) in filterData"
                            :key="index" @click="onClickPopup(index, $event, item.name)">{{ item.name }}</view>
                    </view>
                </view>
                <view class="goodsAction btn-area">
                    <button  type="waring" plain  class="button" @tap="confirmFilter">确认</button>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>

export default {
    props:{
        show:{
            type:Boolean,
            default:false
        },
        filterData:{
            type:Array,
            default:[]
        },
        symbol:{
            type:String,
            default:''
        }
    },
    components: {

    },
    data () {
        return {
            title: '我的积分',
            scrolling: false, // 顶部区域吸顶效果
            scrollTop: 0,
            params:{},
            myScore:'0',
            scoreList:[
          
            ],
            curPopup:0,
            showScorePopup:false,
            popupData: [
                {
                    id: 0,
                    name: '全部'
                },
                {
                    id: 1,
                    name: '已获得'
                },
                {
                    id: 2,
                    name: '已使用'
                },
                {
                    id: 3,
                    name: '已过期'
                },

            ],
            textColor:'',
            pointsType:'',// 积分类型 REWARD: 奖励获得, USE: 使用消费
        }
    },

    computed: {

    },
    onLoad (data) {
     
    },
    onReady () {},

    onShow(){

    },

    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    methods: {
       
        // 弹窗内点击事件
        onClickPopup(index,e,name){
            console.log(index,e,'弹窗内点击事件')
            this.curPopup=index
            this.textColor="color:#ff6203"
            if (this.symbol == 'points'){
                this.pointsType = index==0 ? '':index==1 ? 'REWARD' :index==2 ? 'USE' :'EXPIRED'  // 积分类型 REWARD: 奖励获得, USE: 使用消费    EXPIRED: 已过期
            }
        },

        // 弹窗里确认
        confirmFilter(){
            this.$emit('confirmFilter',this.pointsType,this.curPopup)

        },
        closePopup(){
            this.$emit('closePopup')
        }

    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}

// .content {
//     display: flex;
//     flex-direction: column;
//     box-sizing: border-box;
//     // height: 100vh;
//     // height: calc(100vh - env(safe-area-inset-bottom));
//     overflow-y: auto;
//     z-index: -2;
//     background-size: 100%;
//     background-color: #ffffff;
//     padding-bottom: env(safe-area-inset-bottom);

// }


  // 弹窗
  .popup-content {
      // height: 247px;
      padding: 48rpx 48rpx 144rpx 48rpx;
      font-size: 28rpx;
      background: #ffffff;
      border-radius: 0 0 12px 12px;

      .popup-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 36rpx;
          text-align: left;
          color: #000000;
      }

      .popup-main {
          margin-top: 20px;
          width: 100%;
          margin-bottom: 65rpx;
      }

      .popup-sort {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
      }

      .popup-item {
          // width:30%;
          border: 1px solid #d4d4d4;
          margin-right: 34rpx;
          margin-bottom: 12px;
          // font-weight: 500;
          font-size: 28rpx;
          text-align: center;
          color: #111111;
          height: 60rpx;
          line-height: 60rpx;
          padding-left: 20rpx;
          padding-right: 20rpx;


          &.active {
              border: 1px solid #111111;
              color: #111111;
          }
      }

      button {
          background-color: #FF6203;
          width: 100%;
          border-radius: 38px;
          font-size: 28rpx;
          text-align: center;
          color: #FFFFFF;
          height: 86rpx;
          line-height: 86rpx;
      }

      button[plain] {
          border: none;
      }


  }
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}


.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}
.r12{
    margin-right: 12px;
}
.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
.r16{
    margin-right:16rpx
}

::v-deep .van-icon-arrow {
    color: #b3b3b3 !important;
}

::v-deep .van-info {
    background-color: #FF6203;
}
</style>
